<template>
  <PageLayout 
    title="AI 创作中心" 
    description="探索AI驱动的电影内容创作工具"
  >
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 创作工具 -->
      <div class="card">
        <div class="flex items-center gap-3 mb-6">
          <div class="w-10 h-10 bg-gradient-ai rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
            </svg>
          </div>
          <h2 class="text-2xl font-semibold text-text-primary">创作工具</h2>
        </div>
        <div class="space-y-4">
          <div 
            v-for="tool in aiTools" 
            :key="tool.id"
            class="group flex items-center p-4 border border-background-600 rounded-xl hover:border-primary-500/50 hover:bg-background-700/50 cursor-pointer transition-all duration-normal"
            @click="selectTool(tool)"
          >
            <div class="w-12 h-12 bg-gradient-ai rounded-lg flex items-center justify-center mr-4 group-hover:scale-105 transition-transform">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path :d="tool.icon"/>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="font-medium text-text-primary group-hover:text-primary-400 transition-colors">{{ tool.name }}</h3>
              <p class="text-sm text-text-secondary">{{ tool.description }}</p>
            </div>
            <svg class="w-5 h-5 text-text-muted group-hover:text-primary-400 transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M9 5l7 7-7 7"/>
            </svg>
          </div>
        </div>
      </div>

      <!-- 我的创作 -->
      <div class="card">
        <div class="flex items-center gap-3 mb-6">
          <div class="w-10 h-10 bg-gradient-fictional rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <h2 class="text-2xl font-semibold text-text-primary">我的创作</h2>
        </div>
        <div v-if="myCreations.length === 0" class="text-center py-12">
          <div class="w-20 h-20 bg-background-700 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-text-muted" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <p class="text-text-secondary text-lg mb-2">还没有创作内容</p>
          <p class="text-text-muted">开始使用AI工具创作吧！</p>
        </div>
        <div v-else class="space-y-3">
          <div 
            v-for="creation in myCreations" 
            :key="creation.id"
            class="flex items-center p-4 border border-background-600 rounded-lg hover:bg-background-700/50 cursor-pointer transition-colors"
          >
            <div class="w-10 h-10 bg-success/20 rounded-lg flex items-center justify-center mr-3">
              <svg class="w-5 h-5 text-success" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <div class="flex-1">
              <h4 class="font-medium text-text-primary">{{ creation.title }}</h4>
              <p class="text-sm text-text-secondary">{{ creation.createdAt }}</p>
            </div>
            <span class="text-xs px-3 py-1 bg-primary-600/20 text-primary-400 rounded-full border border-primary-600/30">{{ creation.status }}</span>
          </div>
        </div>
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageLayout from '../components/layout/PageLayout.vue'

interface AiTool {
  id: number
  name: string
  description: string
  icon: string
}

interface Creation {
  id: number
  title: string
  createdAt: string
  status: string
}

const aiTools = ref<AiTool[]>([
  {
    id: 1,
    name: '影评生成器',
    description: '基于电影内容自动生成专业影评',
    icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
  },
  {
    id: 2,
    name: '剧情分析',
    description: '深度分析电影剧情结构和主题',
    icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'
  },
  {
    id: 3,
    name: '角色解读',
    description: '分析电影角色的性格和成长轨迹',
    icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
  },
  {
    id: 4,
    name: '推荐系统',
    description: '基于喜好智能推荐相似电影',
    icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'
  }
])

const myCreations = ref<Creation[]>([])

const selectTool = (tool: AiTool) => {
  // TODO: 实现工具选择逻辑
  console.log('选择工具:', tool.name)
}
</script> 